<template>
  <div id="container130" style="height: 40vh"></div>
</template>

<script>
import echarts from 'echarts'

export default {
  mounted() {
    this.initBar()
  },
  methods: {
    initBar() {
      let dom = document.getElementById('container11')
      let myChart = echarts.init(dom)
      const option = {
        title: {
          text: '30天客户来访数',
          subtext: '',
          left: 'left',
          textStyle:{//图例文字的样式
            color:'#fff',
            fontSize:20
        }
        },
         tooltip: {
        trigger: 'axis'
    },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          splitLine:{show: false},
          axisLine: {
            lineStyle: {
              color: '#fff',
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff', //更改坐标轴文字颜色
              fontSize: 14, //更改坐标轴文字大小
            },
          },
        },
         grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
        yAxis: {
          splitLine:{show: false},
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#fff',
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff', //更改坐标轴文字颜色
              fontSize: 14, //更改坐标轴文字大小
            },
          },
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth:true,
             itemStyle: {  
                normal: {   //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{
                            offset: 1, color: '#05142a' // 0% 处的颜色
                        }, {
                            offset: 0.5, color: '#051e31' // 100% 处的颜色
                        }, {
                            offset: 0, color: '#009a92' // 100% 处的颜色
                        }]
                    ),  //背景渐变色 
                    lineStyle: {        // 系列级个性化折线样式  
                        width: 3,  
                        type: 'solid',  
                         color: "#4fd6d2"
                    }
                },  
            },//线条样式 
            areaStyle: {},
          },
        ],
      }

      if (option && typeof option === 'object') {
        myChart.setOption(option)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
</style>